<!--<template>-->
<!-- <div>-->
<!--   <div style="margin-bottom: 20px">-->
<!--     <RouterLink to="/test"> 通过router跳转到Test.vue |</RouterLink>-->
<!--     <a href="/test"> 通过a标签跳转到Test.vue </a>-->
<!--   </div>-->
<!--&lt;!&ndash;   路由编程式跳转&ndash;&gt;-->
<!--   <div style="margin-bottom: 20px">-->
<!--     <el-button type="primary" @click="router.push('/manager/test')">push跳转到新的路由页面</el-button>-->
<!--     <el-button type="primary" @click="router.replace('/manager/test')">replace跳转到新的路由页面</el-button>-->
<!--   </div>-->

<!--   <div style="margin-bottom: 20px">-->
<!--&lt;!&ndash;     两种路由传参&ndash;&gt;-->
<!--&lt;!&ndash;     <el-button type="primary" @click="router.push('/test?id=2&name=强哥哥')">路由传参id=2&name=强哥哥</el-button>&ndash;&gt;-->
<!--     <el-button type="primary" @click="router.push({path:'/manager/test',query:{id:2,name:'强哥哥'}})">路由传参id=2&name=强哥哥</el-button>-->
<!--   </div>-->

<!--&lt;!&ndash;   表单&ndash;&gt;-->
<!--   <div style="margin-bottom: 20px">-->
<!--&lt;!&ndash;     可以加入一些属性，比如disabled禁用表单、readonly只读、clearable可清空&ndash;&gt;-->
<!--&lt;!&ndash;     :prefix-icon="Search"表示导入搜索图标&ndash;&gt;-->
<!--     <el-input v-model="data.input" clearable style="width: 240px" placeholder="请输入内容" :prefix-icon="Search"/>{{data.input}}-->
<!--     &lt;!&ndash;     :suffix-icon="Calendar"表示后置日期图标&ndash;&gt;-->
<!--     <el-input style="width: 200px" :suffix-icon="Calendar" ></el-input>-->
<!--     &lt;!&ndash;     type="textarea"文字太多时，可以下拉文本&ndash;&gt;-->
<!--     <el-input type="textarea" style="width: 200px" v-model="data.descr" placeholder="请输入一段描述"></el-input>-->
<!--   </div>-->

<!--&lt;!&ndash;   下拉框&ndash;&gt;-->
<!--   <div style="margin-bottom: 20px">-->
<!--&lt;!&ndash;     跟上面一样，同样支持disabled、clearable等属性，还有新的一个属性multiple&ndash;&gt;-->
<!--&lt;!&ndash;     声明value-key=""属性在多选中可以作为唯一标识&ndash;&gt;-->
<!--     <el-select-->
<!--         clearable-->
<!--         multiple-->
<!--         value-key="id"-->
<!--         v-model="data.value"-->
<!--         placeholder="Select"-->
<!--         style="width: 240px"-->
<!--     >-->
<!--       &lt;!&ndash;           v-for中key绑定的数据是唯一的&ndash;&gt;-->
<!--       <el-option-->
<!--           v-for="item in data.options"-->
<!--           :key="item.id"-->
<!--           :label="item.label"-->
<!--           :value="item.name"-->
<!--       />-->
<!--     </el-select>{{data.value}}-->

<!--   </div>-->

<!--&lt;!&ndash;   单选框和单选按钮组&ndash;&gt;-->
<!--   <div style="margin-bottom: 20px">-->
<!--     <el-radio-group v-model="data.sex">-->
<!--       <el-radio value="男">男</el-radio>-->
<!--       <el-radio value="女">女</el-radio>-->
<!--     </el-radio-group> <span style="margin-left: 50px">{{data.sex}}</span>-->

<!--&lt;!&ndash;     要保证v-model里的值与value里的值要对的上&ndash;&gt;-->
<!--     <el-radio-group v-model="data.tag" size="large" style="margin-left: 20px">-->
<!--       <el-radio-button label="New York" value="1" />-->
<!--       <el-radio-button label="Washington" value="2" />-->
<!--       <el-radio-button label="Los Angeles" value="3" />-->
<!--       <el-radio-button label="Chicago" value="4" />-->
<!--     </el-radio-group>-->
<!--   </div>-->

<!--&lt;!&ndash;   多选框&ndash;&gt;-->
<!--   <div style="margin-bottom: 20px">-->
<!--     &lt;!&ndash;   多选框绑定的是数组！！！&ndash;&gt;-->
<!--     <el-checkbox-group v-model="data.checkList">-->
<!--       <el-checkbox v-for="item in data.options" :key="item.id" :value="item.name" :label="item.label" />-->
<!--     </el-checkbox-group> <span>{{data.checkList}}</span>-->
<!--   </div>-->

<!--&lt;!&ndash;   图片&ndash;&gt;-->
<!--   <div style="margin-bottom: 20px">-->
<!--&lt;!&ndash;     对照试验&ndash;&gt;-->
<!--     <img src="@/assets/logo.svg" alt="" style="width: 100px">-->
<!--&lt;!&ndash;     首先el-image需要引入，不能直接使用&ndash;&gt;-->
<!--&lt;!&ndash;     设置图片预览用previewSrcList属性，其必须是一个数组&ndash;&gt;-->
<!--     <el-image :src="img" style="width: 100px; margin-left: 100px" :previewSrcList="[img,'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',-->
<!--  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',-->
<!--  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg']"/>-->
<!--   </div>-->

<!--&lt;!&ndash;   轮播图&ndash;&gt;-->
<!--   <div style="margin-bottom: 20px">-->
<!--     <el-carousel height="400px" style="width: 550px">-->
<!--       <el-carousel-item v-for="item in data.imgs" :key="item">-->
<!--         <img style="width: 100%; height: 400px" :src="item" alt="">-->
<!--       </el-carousel-item>-->
<!--     </el-carousel>-->
<!--   </div>-->

<!--&lt;!&ndash;   日期&ndash;&gt;-->
<!--   <div style="margin-bottom: 20px">-->
<!--     <el-date-picker-->
<!--         v-model="data.date"-->
<!--         type="datetime"-->
<!--         placeholder="请选择日期"-->
<!--         format="YYYY-MM-DD"-->
<!--         value-format="YYYY-MM-DD"-->
<!--     /> <span style="margin-left: 20px">{{data.date}}</span>-->
<!--&lt;!&ndash;     上面显示日期格式太复杂，使用value-format可以改变日期格式,format只能改变输入框格式&ndash;&gt;-->
<!--   </div>-->

<!--&lt;!&ndash;   日期时间&ndash;&gt;-->
<!--   <div style="margin-bottom: 20px">-->
<!--     <el-date-picker-->
<!--         v-model="data.date1"-->
<!--         type="datetime"-->
<!--         placeholder="请选择日期时间"-->
<!--         format="YYYY-MM-DD HH:mm:ss"-->
<!--         value-format="YYYY-MM-DD HH:mm:ss"-->
<!--     /> <span style="margin-left: 20px">{{data.date1}}</span>-->
<!--     &lt;!&ndash;     上面显示日期格式太复杂，使用value-format可以改变日期格式,format只能改变输入框格式&ndash;&gt;-->
<!--   </div>-->

<!--   &lt;!&ndash;   只显示时间&ndash;&gt;-->
<!--   <div style="margin-bottom: 20px">-->
<!--     <el-date-picker-->
<!--         v-model="data.time"-->
<!--         type="datetime"-->
<!--         placeholder="请选择时间"-->
<!--         format="HH:mm:ss"-->
<!--         value-format="HH:mm:ss"-->
<!--     /> <span style="margin-left: 20px">{{data.time}}</span>-->
<!--     &lt;!&ndash;     上面显示日期格式太复杂，使用value-format可以改变日期格式,format只能改变输入框格式&ndash;&gt;-->
<!--   </div>-->

<!--&lt;!&ndash;   显示一段时间&ndash;&gt;-->
<!--   <div style="margin-bottom: 20px">-->
<!--     <el-date-picker-->
<!--         v-model="data.daterange"-->
<!--         type="daterange"-->
<!--         range-separator="至"-->
<!--         start-placeholder="开始日期"-->
<!--         end-placeholder="结束日期"-->
<!--         format="YYYY-MM-DD"-->
<!--         value-format="YYYY-MM-DD"-->
<!--     /><span style="margin-left: 20px">{{data.daterange ?.length ? data.daterange[0]:''}}-->
<!--     {{data.daterange ?.length ? data.daterange[1]:''}}</span>-->
<!--     &lt;!&ndash;         daterange一定是一个数组，数组里面两个值，上面表达式先检查是否为空，再输出&ndash;&gt;-->
<!--   </div>-->

<!--&lt;!&ndash;   table表格&ndash;&gt;-->
<!--   <div style="margin-bottom: 20px">-->
<!--&lt;!&ndash;     stripe表示斑马纹 插槽#default="scope"-->
<!--后面加插槽可以进行增删改查,后面如果觉得删除按钮太难看，那就用垃圾桶的图标-->
<!--primary表示dialog对话框相关&ndash;&gt;-->
<!--     <el-table :data="data.tableData" style="width: 100%" stripe border>-->
<!--       <el-table-column prop="date" label="日期" width="180" />-->
<!--       <el-table-column prop="name" label="名称" width="180" />-->
<!--       <el-table-column prop="address" label="地址" />-->
<!--       <el-table-column label="操作">-->
<!--         <template #default="scope">-->
<!--           <el-button type="primary" circle @click="edit(scope.row)">-->
<!--             <el-icon><Edit /></el-icon>-->
<!--           </el-button>-->
<!--           <el-button type="danger" circle @click="del(scope.row.id)">-->
<!--             <el-icon><Delete /></el-icon>-->
<!--           </el-button>-->
<!--         </template>-->
<!--       </el-table-column>-->
<!--     </el-table>-->
<!--&lt;!&ndash;     当表格中数据太多时，需要分页器&ndash;&gt;-->
<!--     <div style="padding-bottom: 10px">-->
<!--       <el-pagination-->
<!--           v-model:current-page="data.currentPage"-->
<!--           v-model:page-size="data.pageSize"-->
<!--           :page-sizes="[5, 10, 15, 20]"-->
<!--           :background="background"-->
<!--           layout="total, sizes, prev, pager, next, jumper"-->
<!--           :total="data.tableData.length"-->
<!--           @size-change="handleSizeChange"-->
<!--           @current-change="handleCurrentChange"-->
<!--       />-->
<!--       &lt;!&ndash;           上面两项需要计算，有点麻烦，等到后面学了增删改查就不难了&ndash;&gt;-->
<!--     </div>-->
<!--   </div>-->

<!--&lt;!&ndash;   Dialog对话框&ndash;&gt;-->
<!--&lt;!&ndash;   dialogVisible是来控制弹窗显示的变量&ndash;&gt;-->
<!--   <el-dialog v-model="data.dialogVisible" title="编辑行对象" width="500">-->
<!--     <div style="padding: 20px">-->
<!--       <div style="margin-bottom: 10px">日期：{{data.row.date}}</div>-->
<!--       <div style="margin-bottom: 10px">名称：{{data.row.name}}</div>-->
<!--       <div >地址：{{data.row.address}}</div>-->
<!--     </div>-->
<!--   </el-dialog>-->

<!--  </div>-->
<!--</template>-->

<!--<script setup>-->
<!--import {reactive} from "vue";-->
<!--import {Search,Calendar} from "@element-plus/icons-vue";-->
<!--import img from "@/assets/logo.svg"-->
<!--import lun1 from "@/assets/lun1.png"-->
<!--import lun2 from "@/assets/lun2.png"-->
<!--import lun3 from "@/assets/lun3.png"-->
<!--import router from "@/router/index.js";-->
<!--import request from "@/utils/request.js";-->

<!--const data=reactive({-->
<!--  input:"强宝宝棒棒哒",-->
<!--  descr:"用于输入多行文本信息可缩放的输入框。 添加 type=\"textarea\" 属性来将 input 元素转换为原生的 textarea 元素。文本域高度可通过 rows 属性控制",-->
<!--  value:'',-->
<!--  // options:[{id:1,name:'苹果'},{id:2,name:'香蕉'},{id:1,name:'桃子'},{id:4,name:'苹果'}]-->
<!--  // 但是多选会将id不同而name相同的选项给选上，为了解决这个问题，需要多定义一个属性label-->
<!--  options:[{id:1,label:'苹果',name:'苹果1'},{id:2,label:'香蕉',name:'香蕉'},-->
<!--    {id:1,label:'桃子',name:'桃子'},{id:4,label:'苹果',name:'苹果2'}],-->
<!--  sex:'男',-->
<!--  tag:'2',-->
<!--  checkList:[],-->
<!--  imgs:[lun1,lun2,lun3],-->
<!--  date:'',-->
<!--  date1:'',-->
<!--  time:'',-->
<!--  daterange:null,-->
<!--  currentPage:1,-->
<!--  pageSize:5,-->
<!--  tableData:[-->
<!--    {id:1,date:'2025-6-1',name:'抢出',address:'浙江金华'},-->
<!--    {id:2,date:'2025-6-1',name:'脱出',address:'河北邯郸'},-->
<!--    {id:3,date:'2025-6-1',name:'好处',address:'河南许昌'},-->
<!--    {id:4,date:'2025-6-1',name:'抢出',address:'浙江金华'},-->
<!--    {id:5,date:'2025-6-1',name:'脱出',address:'河北邯郸'},-->
<!--    {id:6,date:'2025-6-1',name:'好处',address:'河南许昌'},-->
<!--  ],-->
<!--  dialogVisible:false,-->
<!--  row:null,-->
<!--  employeeList:[]-->
<!--})-->

<!--//把后端那个res里面这个data的内容拿过来复制给他，想要打印alert内容却失败了，解决方法：在springboot里设置统一的跨域-->
<!--request.get('/employee/selectAll').then(res=>{-->
<!--//  alert(res) //json返回的数据不能直接alert弹出来，需要console.log-->
<!--  console.log(res) //打印数据-->
<!--  data.employeeList=res.data //res.data就是员工的列表数据，是一个数组-->
<!--  console.log(data.employeeList)//打印数组数据-->
<!--})-->

<!--const del=(id)=>{-->
<!--  alert("删除ID="+id+"的数据")-->
<!--}-->

<!--// 注意row是全局变量-->
<!--const edit=(row)=>{-->
<!--  data.row=row-->
<!--  data.dialogVisible=true-->
<!--}-->

<!--data.tableData=data.tableData.splice(0,5)-->
<!--</script>-->

<!--&lt;!&ndash;总结：多看几遍，最后全部都会用到&ndash;&gt;-->

<!--<template>-->
<!--  <div >-->
<!--    <div >-->
<!--      <div style="background-color: blue;color: white;text-align: left;padding: 40px;margin: 40px;-->
<!--                  font-size: 30px; border-style: solid;border-radius: 30px 30px 30px 30px;-->
<!--                  font-weight: bold; box-shadow: 2px 2px 2px black">-->
<!--        智能检索-->
<!--        <div style="margin-top: 20px;font-size: 15px">-->
<!--          快速查找所需档案-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div style="background-color: white;color: white;text-align: left;padding: 40px;margin: 40px;-->
<!--                  font-size: 30px; border-style: solid;border-radius: 30px 30px 30px 30px;-->
<!--                  font-weight: bold; box-shadow: 2px 2px 2px black">-->
<!--      <div >-->
<!--        prefix-icon="User"-->
<!--      </div>-->
<!--      <div style="color: black">-->
<!--        搜索-->
<!--      </div>-->
<!--    </div>-->

<!--    <div style="color: white;text-align: left;margin: 40px;-->
<!--                  font-size: 30px; border-style: solid;border-radius: 30px 30px 30px 30px;-->
<!--                  font-weight: bold">-->
<!--      <img src="~@/assets/lun1.png" style="width: 100%">-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup>-->
<!--import {User,Lock} from "@element-plus/icons-vue"-->
<!--import {reactive} from "vue";-->

<!--const data=reactive({-->
<!--  imgs:[lun1,lun2,lun3],-->
<!--})-->
<!--</script>-->

<!--<style scoped>-->

<!--</style>-->

<template>
  <div>
    <div style="display: flex">
      <!-- 轮播图 -->
      <div style="margin-left: 40px; border-radius: 30px; overflow: hidden;width: 700px">
        <el-carousel height="400px" >
          <el-carousel-item v-for="(img, index) in imgs" :key="index">
            <img :src="img" style="width: 100%; height: 100%; object-fit: fill">
          </el-carousel-item>
        </el-carousel>
      </div>

      <div style="background: white;text-align: right; padding: 40px; margin-left: 60px;
                font-size: 30px; border-radius: 30px; font-weight: bold; box-shadow: 2px 2px 2px black;
                color: #2b8f01">
        <div style="margin-right: 20px">
          欢迎登录数字档案管理系统!
        </div>
        <div >
          <img :src="lazy" style="width: 100%">
        </div>
      </div>
    </div>
    <!-- 欢迎横幅 -->
    <div style="background-color: deepskyblue; color: white; text-align: left; padding: 40px; margin: 40px;
                font-size: 30px; border-radius: 30px; font-weight: bold; box-shadow: 2px 2px 2px black">
      智能检索
      <div style="margin-top: 20px; font-size: 15px">
        快速查找所需档案
      </div>
    </div>

    <!-- 搜索框 -->
    <div style="background-color: white; text-align: left; padding: 40px; margin: 40px;
                border-radius: 30px; font-weight: bold; box-shadow: 2px 2px 2px black;
                display: flex">
      <el-input placeholder="请输入搜索内容" :prefix-icon="User" />
      <el-button type="success" style="margin-left: 10px">搜索</el-button>
    </div>
  </div>
</template>

<script setup>
import { User } from "@element-plus/icons-vue"
import { ref } from "vue"

// 使用正确的图片导入方式
import lun4 from "@/assets/lun4.png"
import lun5 from "@/assets/lun5.png"
import lun6 from "@/assets/lun6.png"
import lazy from "@/assets/lazy.png"

const imgs = ref([lun4,lun5, lun6])
</script>